// 状态管理文件
// 引入状态管理文件
import { createStore } from 'vuex'
// vuex使用的时候，当刷新页面回导致数据恢复到初始状态，数据丢失，如何解决？
// 第一种，手动将数据保持在本地，删除时手动删除
// 第二种，使用插件帮我们自动保存在本地，删除的时候自动删除

/*
    1. 安装数据持久化的库
    npm install vuex-persistedstate --save
    2. 操作文件中导入该库
    3. 配置 plugins 插件
*/
import createPersistedState from 'vuex-persistedstate'
// 创建一个store对象。全局状态
const store = createStore({
  // 开启严格模式，开发时候开启，上架部署关闭
  strict: true,
  // 定义全局数据
  state() {
    // 放的是全局数据
    return {
      count: 100,
      // 存储用户登录的数据
      userInfo: {},
    }
  },
  // 定义唯一修改数据的方法
  mutations: {
    add(state) {
      // 同步修改
      state.count++
      // 同步方法里面不要写异步方法
      // setTimeout(()=>{
      //     state.count++
      // },1000)
    },
    addNum(state, num) {
      state.count += num
    },
    // 定义异步修改方法
    asyncAdd(state) {
      // 异步修改
      // state.count++
    },
    updateUserInfo(state, value) {
      state.userInfo = value
    },
  },
  // 定义异步修改方法
  actions: {
    asyncAdd(contextStore) {
      // 异步修改
      // contextStore.commit('add')
      // 先做完异步后做同步
      setTimeout(() => {
        contextStore.commit('add')
      }, 1000)
    },
    asyncAddNum(contextStore, value) {
      // 异步修改
      // contextStore.commit('add')
      // 先做完异步后做同步
      setTimeout(() => {
        contextStore.commit('addNum', value)
      }, 1000)
    },
  },
  // 定义全局状态的计算属性
  getters: {
    // 计算数据，监听全局状态的变化
    dbCount(state) {
      return state.count * 2
    },
  },
  // 状态模块
  modules: {},
  // 插件使用
  plugins: [
    // vuex 全局状态管理，在页面刷新的时候会导致数据恢复到初始值，数据丢失
    // 我们可以将数据保存在本地或者使用插件
    createPersistedState({
      reducer: (state) => {
        return {
          // 持久化保存的数据
          count: state.count,
          userInfo: state.userInfo,
        }
      },
    }),
  ],
})

// 暴露store
export default store
